/<template>
  <div class="list">
          <dl 
          v-for="(item,index) in data" 
          :key="index"
          @click="changeActive(index)"
          :class='{on:index==activeIndex}'
          >
              <dt><img :src="item.img" alt=""></dt>
              <dd>
                  <h3>{{item.title}}</h3>
                  <p>
                      <span>{{item.name}}</span>
                      <span>{{item.num}}</span>
                  </p>
              </dd>
          </dl>
  </div>
</template>

<script>
export default {
    props:{
        data:Array,
        activeIndex:Number
    },
    
}
</script>

<style>
.list{
    display: flex;
    overflow-y: scroll;
    flex-wrap: wrap;
}
dl{
    width: 45%;
    margin-left: 20px;
}
.on{
    color: #fff;
}
</style>